<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="table-container">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form-model layout="inline" v-bind="searchModelConfig"
              @keyup.enter.native="searchQuery">
              <a-row v-bind="searchRowConfig">
                <a-col :span="5">
                  <a-form-model-item>
                    <a-input v-model="queryParam.searchValue" placeholder="请输入身份证号码/姓名/联系电话">
                      <a-icon slot="prefix" class="font-placeholder" type="search" />
                    </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="3">
                  <a-form-model-item>
                    <a-input v-model="queryParam.source" placeholder="请输入客户渠道">
                      <a-icon slot="prefix" class="font-placeholder" type="search" />
                    </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="2">
                  <a-form-model-item>
                    <a-select v-model="queryParam.sex" placeholder="性别">
                      <a-select-option value="男">男</a-select-option>
                      <a-select-option value="女">女</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>

                <a-col class="table-page-search-submitButtons" v-bind="searchColConfig">
                  <a-button @click="searchQuery" type="primary">查询</a-button>
                  <a-button @click="searchReset" type="danger">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model>
          </div>

          <!-- 操作按钮区域 -->
          <div class="table-operator">
            <div>
              <a-button @click="handleAdd" type="primary" v-has="['insertAccount']">新增客户</a-button>
            </div>
            <div>
              <a-button @click="exportExcel" :loading="exportLoading" v-has="['accountExport']">导出客户</a-button>
            </div>
          </div>
          <!-- table区域-begin -->
          <a-row>
            <a-col :span="24">
              <ry-table
                :columns="columns" :loading="loading" :data-source="dataSource"
                :rowKey="record=>record.id" :pagination="ipagination" bordered
                :scroll="{ x: 'max-content'}">
                <template slot="classificationId" slot-scope="{text}">
                  {{$getDictName('LABEL_LIST',text)}}
                </template>
                <template slot="sex" slot-scope="{text}">
                  {{text}}
                </template>
                <template slot="age" slot-scope="{record}">
                  {{idCardChange(record.birth)}}
                </template>
                <template slot="phone" slot-scope="{text}">
                  {{maskPhone(text)}}
                </template>
                <template slot="action" slot-scope="{record}">
                  <a-space size="middle">
                    <a-tooltip title="客户详情">
                      <a-button @click="handleEdit(record)" type="primary" v-has="['accountView']">客户详情</a-button>
                    </a-tooltip>
                    <a-tooltip title="申请项目">
                      <a-button @click="handleApplyProject(record)" type="primary" v-has="['applyProject']">申请项目</a-button>
                    </a-tooltip>
                    <a-tooltip title="会员详情">
                      <a-button @click="toEvaluations(record)" type="danger" v-has="['accountMember']">会员详情</a-button>
                    </a-tooltip>
                    <a-tooltip title="细胞详情">
                      <a-button @click="toRehabilitation(record)" type="primary" v-has="['cellView']">细胞详情</a-button>
                    </a-tooltip>
                    <a-tooltip title="删除客户">
                      <a-button @click="handleDelete(record.id, '客户，以及有关客户所有数据，请谨慎操作')" type="default" v-has="['cellDelete']">删除客户</a-button>
                    </a-tooltip>
                  </a-space>
                </template>
              </ry-table>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
    <AccountModal ref="modalForm" @ModalOk="modalFormOk" :url="url"></AccountModal>
<!--    <AccountMemberCardModel ref="accountMemberCardModel"></AccountMemberCardModel>-->
    <AccountMemberCardListModel ref="accountMemberCardListModel"></AccountMemberCardListModel>
    <AccountCellModel ref="accountCellModel"></AccountCellModel>
  </div>
</template>

<script>
import AccountModal from './modules/AccountModal.vue'
import { RyListMixin } from '@/ryweb'
import AccountCellModel from "./modules/AccountCellModel.vue"
import AccountMemberCardListModel from "./modules/AccountMemberCardListModel.vue"
import { exportExcel } from '@/utils/export.js'
export default {
  name: '',
  mixins: [RyListMixin, exportExcel],
  components: {AccountMemberCardListModel, AccountModal, AccountCellModel},
  data () {
    return {
      reloadDict: true,
      show: false,
      isShow: false,
      phoneData: false,
      education: false,
      maritalStatus: false,
      addressCondition: false,
      address: false,
      exportLoading: false,
      columns: [
        {
          title: '客户编号',
          align: 'center',
          dataIndex: 'serialNumber'
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'nickname'
        },
        {
          title: '年龄',
          align: 'center',
          dataIndex: 'age',
          scopedSlots: {customRender: 'age'}
        },
        {
          title: '联系电话',
          align: 'center',
          dataIndex: 'phone',
          scopedSlots: {customRender: 'phone'}
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'sex',
          scopedSlots: {customRender: 'sex'}
        },
        {
          title: '客户渠道',
          align: 'center',
          dataIndex: 'source'
        },
        {
          title: '出生日期',
          align: 'center',
          dataIndex: 'birth'
        },
        {
          title: '建档日期',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: this.$api.permission.account.account,
        add: this.$api.permission.account.insert,
        edit: this.$api.permission.account.update,
        delete: this.$api.permission.account.delete,
        exportFile: this.$api.permission.account.exportExcel
      }
    }
  },
  props: {
    treeId: {
      type: String
    }
  },
  computed: {
  },
  watch: {
    treeId: {
      handler (newVal, oldVal) {
        this.queryParam.idNum = newVal
        this.searchQuery()
      },
      immediate: true
    }
  },
  methods: {
    idCardChange (birth) {
      // 获取出生日期和年龄
      // 计算年龄
      if (birth) {
        const birthDate = new Date(birth);
        const today = new Date();

        let age = today.getFullYear() - birthDate.getFullYear();
        const monthDiff = today.getMonth() - birthDate.getMonth();

        // 如果今年生日还没过，年龄减1
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
          age--;
        }
        // 更新表单数据
        return age
      }
    },
    maskPhone(phone) {
      if (!phone) return '';
      return phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
    },
    modalFormOk () {
      // 新增/修改 成功时，重载列表
      this.loadData(1)
    },
    async exportExcel () {
      this.exportLoading = true
      await this.exportXlsNotDate(this.url.exportFile, this.queryParam, '客户数据导出文件', false)
      this.exportLoading = false
    },
    onChange (v) {
      console.log(v)
      v = v.toString()
      console.log('当前的', v)
    },
    handleApplyProject (value) {
      this.$router.push({ name: 'ApplyProject', query: { value: encodeURIComponent(JSON.stringify(value)) }})
    },
    toEvaluations (value) {
      this.$refs.accountMemberCardListModel.open(value)
    },
    toRehabilitation (value) {
      this.$refs.accountCellModel.open(value)
    },
    offDialog (value) {
      this.isShow = value
    },
    // 删除指定项
    arrDel (arr, func) {
      arr.forEach((item, i) => {
        if (func(item)) {
          arr.splice(i, 1)
        }
      })
    }
  },
  filters: {},
  created () {
  },
  mounted () {
  },
  beforeDestroy () { }
}
</script>

<style lang="less">
#LabelInfoMaintain {
  border-left: 1px solid #f4f4f4;
}
.table-operator {
  display: flex;
  justify-content: space-between;
  align-content: center;
  .setting {
    margin-top: 5px;
    font-size: 16px;
    color: #00bbbb;
  }
}
.age_box {
  width: 100%;
  padding: 0;
  .ant-form-item {
    width: 100%;
    text-align: center;
  }
  .ant-input {
    width: 40%;
  }
}
.ant-col .ant-col-1 {
  padding: -12px;
}
.table-page-search-wrapper {
  margin-left: 0rem;
}
</style>
